<template>
  <div>
    <div
      v-for="(item, index) in ecgList"
      :key="index"
      :id="'container' + index"
      class="container"
    ></div>
  </div>
</template>

<script>
import Papa from 'papaparse'
import * as samplesData from './../../../public/js/ss'
var Highcharts = require('highcharts')
export default {
  name: 'EcgChart',
  props: {
    widthValue: {
      type: Number,
      default: undefined
    },
    heightValue: {
      type: Number,
      default: undefined
    }
  },
  data() {
    return {
      list: [],
      ecgList: [
        {
          time: '10:48:41',
          name: 'aVF',
          data: this.list
        },
        {
          time: '10:48:55',
          name: 'aVF',
          data: this.list
        },
        {
          time: '10:49:09',
          name: 'aVF',
          data: this.list
        }
      ],
      fecg_data: []
    }
  },
  watch: {
    'widthValue': 'chartBox'
  },
  created() {
    this.getData()
  },
  methods: {
    chartBox() {
      this.$nextTick(() => {
        console.log('aaaaa')
        this.ecgList.forEach((item, index) => {
          this.createChart1(item, index)
        })
      })
    },
    createChart1(item, index) {
      const that = this
      require('highcharts/modules/data')(Highcharts)
      Highcharts.chart(`container${index}`, {
        chart: {
          type: 'spline',
          width: that.widthValue,
          height: that.heightValue || 100,
          backgroundColor: '#FFF'
        },
        credits: {
          enabled: false
        },
        title: {
          text: item.time,
          align: 'left',
          floating: true,
          y: 0,
          style: {
            fontSize: '14px',
            marginTop: '30px'
          }
        },
        subtitle: {
          text: item.name,
          align: 'left',
          y: 20,
          floating: true
        },
        yAxis: {
          labels: {
            enabled: false
          },
          tickPositions: [-1, -0.5, 0, 0.5, 1],
          title: {
            enabled: false
          },
          gridLineWidth: 0,
          max: 1
        },
        xAxis: {
          labels: {
            enabled: false
          },
          tickWidth: 0,
          lineWidth: 0,
          gridLineWidth: 0
        },
        legend: {
          enabled: false
        },
        plotOptions: {
          series: {
            lineWidth: 1
          }
        },
        series: [
          {
            name: 'I',
            turboThreshold: 200000,
            enableMouseTracking: false,
            marker: {
              enabled: false
            },
            data: (function() {
              const value = that.list
              var data = []
              for (let i = 0; i < value.length - 1; i += 1) {
                data.push({
                  x: value[i][0],
                  y: value[i][1]
                })
              }
              return data
            })(),
            zoneAxis: 'x',
            zones: [
              {
                value: 100,
                color: '#7cb5ec'
              },
              {
                value: 300,
                color: '#ff0000'
                // dashStyle: 'dot'
              }
            ]
          }
        ]
      })
    },
    getData() {
      const data = Papa.parse(samplesData.samplesData).data
      var fecg_data = []
      for (var i = 2; i < data.length - 1; i++) {
        var item = data[i]
        var arr = []
        arr[0] = item[0].substring(0)
        arr[1] = item[1].substring(0)
        fecg_data[i] = arr
      }

      for (let i = 4; i < fecg_data.length - 1; i++) {
        var time = fecg_data[i]
        var time1 = time[0].trim().substring(3)
        var new_time = time1.split('.')
        fecg_data[i][0] = parseInt(new_time[0]) * 1000 + parseInt(new_time[1])
        fecg_data[i][1] = Number(fecg_data[i][1])
      }

      // console.log(fecg_data)
      this.fecg_data = fecg_data
      this.list = fecg_data.slice(4, fecg_data.length - 2)
    }
  }
}
</script>

<style lang="scss">

</style>
